import React, { useState } from "react";
import {
  Box,
  Typography,
  Button,
  Grid,
  Tabs,
  Tab,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Paper,
  TextField,
  Divider,
  Chip,
  IconButton,
  ThemeProvider,
  CssBaseline
} from "@mui/material";
import {
  Description as DescriptionIcon,
  PictureAsPdf as PdfIcon,
  InsertDriveFile as DocIcon,
  TableChart as XlsxIcon,
  Delete as DeleteIcon,
  Add as AddIcon,
  Search as SearchIcon,
} from "@mui/icons-material";
import theme from "../themes/theme "

const mockCategories = [
  { name: "发展规划", count: 12 },
  { name: "评估模型", count: 8 },
  { name: "使用说明", count: 15 },
  {
    name: "重点工程",
    count: 7,
    children: ["数据中台建设", "智能决策系统"],
  },
  { name: "培训资料", count: 9 },
];

const mockKnowledge = [
  {
    title: "数字化转型成熟度模型",
    version: "1.0",
    category: "评估模型",
    date: "2023-06-01",
    tag: "最新",
    attachments: [
      { name: "成熟度模型详细说明", type: "pdf" },
      { name: "指标体系清单", type: "xlsx" },
      { name: "评分标准与实施指南", type: "docx" },
    ],
    versions: [
      { version: "1.2", date: "2023-06-01", current: true },
      { version: "1.1", date: "2023-03-15" },
    ],
  },
  {
    title: "企业数字化能力发展规划",
    version: "2.0",
    category: "发展规划",
    date: "2023-04-15",
    tag: "V2",
    attachments: [],
    versions: [],
  },
  {
    title: "数据中台实施方案",
    version: "1.0",
    category: "重点工程",
    date: "2023-03-20",
    attachments: [],
    versions: [],
  },
];

const KnowledgeManagementPage = () => {
  const [tabIndex, setTabIndex] = useState(0);
  const [selectedKnowledge, setSelectedKnowledge] = useState(mockKnowledge[0]);

  return (
   <ThemeProvider theme={theme}>
      <CssBaseline /> 
    <Box display="flex" height="100vh" bgcolor="#0f1d33" color="#fff" p={2}>
      {/* 左侧分类导航 */}
      <Box width="240px" pr={2}>
        <Typography variant="h6" mb={1}>知识分类与导航</Typography>
        <TextField fullWidth variant="outlined" size="small" placeholder="搜索分类..." InputProps={{
          startAdornment: <SearchIcon />,
          style: { background: '#1a2b4c', color: '#fff' },
        }}/>
        <List>
          {mockCategories.map((cat, index) => (
            <ListItem button key={index}>
              <ListItemIcon><DescriptionIcon sx={{ color: '#fff' }} /></ListItemIcon>
              <ListItemText primary={cat.name} />
              <Chip label={cat.count} size="small" color="primary" />
            </ListItem>
          ))}
        </List>
        <Button fullWidth variant="contained" color="primary" startIcon={<AddIcon />}>新增分类</Button>
      </Box>

      {/* 中间知识列表 */}
      <Box flex={1} pr={2}>
        <Typography variant="h6" mb={1}>知识列表展示</Typography>
        <TextField fullWidth variant="outlined" size="small" placeholder="智能检索..." InputProps={{
          startAdornment: <SearchIcon />,
          style: { background: '#1a2b4c', color: '#fff' },
        }}/>
        <Paper sx={{ mt: 2, backgroundColor: '#1a2b4c' }}>
          {mockKnowledge.map((item, idx) => (
            <Box key={idx} p={2} borderBottom="1px solid #333" onClick={() => setSelectedKnowledge(item)}>
              <Typography fontWeight="bold">{item.title} V{item.version}</Typography>
              <Typography variant="body2">分类: {item.category}</Typography>
              <Typography variant="caption">版本: {item.version} | {item.date}</Typography>
              {item.tag && <Chip label={item.tag} color="success" size="small" sx={{ ml: 1 }} />}
            </Box>
          ))}
        </Paper>
        <Box mt={2} display="flex" gap={1}>
          <Button variant="contained" startIcon={<AddIcon />}>新增</Button>
          <Button variant="contained" color="secondary">编辑</Button>
          <Button variant="contained" color="error" startIcon={<DeleteIcon />}>删除</Button>
        </Box>
      </Box>

      {/* 右侧知识详情 */}
      <Box width="400px">
        <Tabs value={tabIndex} onChange={(e, v) => setTabIndex(v)} textColor="inherit">
          <Tab label="知识详情" />
          <Tab label="版本管理" />
          <Tab label="关联信息" />
        </Tabs>

        {/* 附件列表 */}
        <Box mt={2}>
          <Typography variant="h6" gutterBottom>附件列表</Typography>
          {selectedKnowledge.attachments.map((file, idx) => (
            <Box key={idx} display="flex" alignItems="center" justifyContent="space-between" mb={1}>
              <Box display="flex" alignItems="center" gap={1}>
                {file.type === 'pdf' && <PdfIcon color="error" />}
                {file.type === 'xlsx' && <XlsxIcon color="success" />}
                {file.type === 'docx' && <DocIcon color="primary" />}
                <Typography>{file.name}.{file.type}</Typography>
              </Box>
              <Button variant="contained" size="small">下载</Button>
            </Box>
          ))}
        </Box>

        {/* 版本历史 */}
        <Box mt={4}>
          <Typography variant="h6" gutterBottom>版本历史</Typography>
          {selectedKnowledge.versions.map((ver, idx) => (
            <Box key={idx} display="flex" justifyContent="space-between" mb={1}>
              <Typography>
                V{ver.version} {ver.current && <Chip label="当前" color="success" size="small" />}
              </Typography>
              <Typography variant="body2">{ver.date}</Typography>
            </Box>
          ))}
        </Box>
      </Box>
    </Box>
   </ThemeProvider> 
  );
};

export default KnowledgeManagementPage;